<template>
    <div class="search-history">
        <van-cell title="搜索历史">
            <template #default>
                <div v-if="isDelete">
                    <span @click="$emit('deleteAll')">全部删除</span>
                    &nbsp;
                    <span @click="isDelete = false">完成</span>
                </div>
                <van-icon name="delete-o" v-else @click="isDelete = true"/>
            </template>
        </van-cell>
        <van-cell :title="history" v-for="(history, index) in searchHistory" :key="index" @click="onHistoryClick(index, history)">
            <template #right-icon>
                <van-icon name="close" v-show="isDelete"/>
            </template>
        </van-cell>
    </div>
</template>

<script>
import { setItem } from '@/utils/storage'

export default {
    name: 'SearchHistory',
    props: {
        searchHistory: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            isDelete: false //控制删除状态
        }
    },
    methods: {
        // 点击历史记录，执行不同操作
        onHistoryClick(index, history) {
            if(this.isDelete) {
                // 删除状态，则删掉该条记录
                this.searchHistory.splice(index, 1)
                this.$toast('删除成功')
            } else {
                // // 非删除状态，则点击搜索
                this.$emit('searchHistory', history)
            }
        }
    }
}
</script>

<style lang="less" scoped></style>